<template>
  <div class="view-wrapper">
    <el-card>
      <el-tabs v-model="tab">
        <el-tab-pane label="全局设置" name="global_setting"></el-tab-pane>
        <el-tab-pane label="远程附件" name="remote_attachment">
          <el-row>
            <el-col :span="24">
              <el-radio  v-model="server" label="none">关闭</el-radio>
              <el-radio  v-model="server" label="ftp">FTP服务器</el-radio>
              <el-radio v-model="server" label="alibaba_cloud">
                阿里云OSS服务器 <span class="recommend-lbl">推荐，快速稳定</span>
              </el-radio>
              <el-radio v-model="server" label="qiniu_cloud">
                七牛云存储 <span class="recommend-lbl">推荐，快速稳定</span>
              </el-radio>
              <el-radio v-model="server" label="q_cloud">
                腾讯云存储 <span class="recommend-lbl">推荐，快速稳定</span>
              </el-radio>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="message-banner">
                启用七牛云存储之后，请把/attachment目录下（不包括此目录）下的子文件及子目录上传至七牛云存储。
                <br>相关工具：七牛云存储
              </div>
            </el-col>
          </el-row>
          <div class="divide-block"></div>
          <el-form>
            <el-row :gutter="30">
              <el-col :span="3">
                <span class="lbl-project">AccessKey：</span>
              </el-col>
              <el-col :span="19">
                <el-form-item>
                  <el-input placeholder="请输入可用的用于签名的公钥"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="3">
                <span class="lbl-project">SecretKey：</span>
              </el-col>
              <el-col :span="19">
                <el-form-item>
                  <el-input placeholder="请输入可用的用于签名的私钥"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="3">
                <span class="lbl-project">Bucket：</span>
              </el-col>
              <el-col :span="19">
                <el-form-item>
                  <el-input placeholder="请保证Bucket为可公共读取的"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="3">
                <span class="lbl-project">Url：</span>
              </el-col>
              <el-col :span="19">
                <el-form-item>
                  <el-input placeholder="七牛云支持用户自定义域名。注:url开头加http://或https://结尾不加'/'，例：http://abc.com"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="24">
                <el-button style="width: 120px;height: 35px" type="success">保存配置</el-button>
                <el-button style="height: 35px" type="primary">测试配置（无需保存）</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'AttachmentConfig',
    data: () => ({
      tab: 'remote_attachment',
      server: 'none'
    })
  }
</script>

<style scoped lang="scss">

  @import "../../assets/css/mixin";

  .recommend-lbl{
    background: #0BCC08;
    color: white;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    width: 100px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    margin-left: 10px;
  }

  .message-banner{
    margin-top: 30px;
    width: 100%;
    padding: 20px 20px;
    min-height: 80px;
    background-color: #d9edf8;
    border: 1px #bde8f1 solid;
    border-radius: 5px;
    color: #31708e;
    line-height: 25px;
  }

</style>
